<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/layui-v2.6.4/css/layui.css" rel="stylesheet">
    <script src="/layui/layui.js"></script>
    <script src="/layui/jquery.min.js"></script>
    <script src="/layui/axios.min.js"></script>
    <script src="/layui/vue.min.js"></script>
</head>
<body>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="upload">上传</a>
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="show">查看</a>
    <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="approve">审批</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<div style="padding-right: 20px;padding-left: 20px">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>案件信息管理</legend>
    </fieldset>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-row">
                <form class="layui-form">
                    <div class="layui-col-md3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">原告身份证</label>
                            <div class="layui-input-block">
                                <input type="text" name="casesPlaintiffIdCard" lay-verify="required" autocomplete="off" placeholder="请输入原告身份证" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <button type="button" class="layui-btn layui-btn-normal" lay-submit lay-filter="search">查找</button>
                    </div>
                </form>
            </div>
            <div class="layui-panel">
                <div style="padding: 50px 30px;">
                    <table class="layui-hide" id="lawyer" lay-filter="lawyer"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="uploadView" hidden style="text-align: center;padding: 20px 20px">
    <form class="layui-form">
        <div class="layui-upload-drag" id="upload">
            <i class="layui-icon"></i>
            <p>点击上传，或将文件拖拽到此处</p>
            <div class="layui-hide" id="uploadDemoView">
                <hr>
                <img src="" alt="上传成功后渲染" style="max-width: 196px">
            </div>
        </div>
        <input id="casesImage" name="casesImage" lay-verify="image" hidden>
        <input id="id" name="id" hidden>
        <br>
        <br>
        <div style="text-align: right">
            <button type="button" class="layui-btn" lay-submit lay-filter="upload">修改图片</button>
        </div>
    </form>
</div>

<div id="cases" hidden style="padding: 20px 20px">
    <form class="layui-form" lay-filter="cases">
        <input id="id" name="id" hidden>
        <div class="layui-form-item">
            <label class="layui-form-label">案件标题</label>
            <div class="layui-input-block">
                <input type="text" disabled name="casesTitle" lay-verify="required" autocomplete="off" placeholder="请输入案件标题" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">案件简述</label>
            <div class="layui-input-block">
                <textarea name="casesIntroduce" disabled lay-verify="required" placeholder="请输入案件简述" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">原告人姓名</label>
            <div class="layui-input-block">
                <input type="text" disabled name="casesPlaintiffName" lay-verify="required" autocomplete="off" placeholder="请输入原告人姓名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">原告身份证</label>
            <div class="layui-input-block">
                <input type="text" disabled name="casesPlaintiffIdCard" lay-verify="required|identity" autocomplete="off" placeholder="请输入原告身份证" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">被告人姓名</label>
            <div class="layui-input-block">
                <input type="text" disabled name="casesDefendantName" lay-verify="required" autocomplete="off" placeholder="请输入被告人姓名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">被告身份证</label>
            <div class="layui-input-block">
                <input type="text" disabled name="casesDefendantIdCard" lay-verify="required|identity" autocomplete="off" placeholder="请输入被告身份证" class="layui-input">
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-md4">
                <h3 style="text-align: center">证据一</h3>
                <img id="annex1" src="" style="height: 200px;width: 200px">
            </div>
            <div class="layui-col-md4">
                <h3 style="text-align: center">证据二</h3>
                <img id="annex2" src="" style="height: 200px;width: 200px">
            </div>
            <div class="layui-col-md4">
                <h3 style="text-align: center">证据三</h3>
                <img id="annex3" src="" style="height: 200px;width: 200px">
            </div>
        </div>
        <input id="casesStatus" name="casesStatus" hidden>
        <div style="text-align: center">
            <button class="layui-btn layui-btn-primary" type="button" lay-submit lay-filter="pass">通过审核</button>
            <button class="layui-btn layui-btn-danger" type="button" lay-submit lay-filter="notPass">审核不通过</button>
        </div >
    </form>
</div>
<div id="approveView" style="padding: 20px 20px;display: none">
    <form class="layui-form">
        <input id="id" name="id" hidden>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">案情分析<span style="color: red">*</span></label>
            <div class="layui-input-block">
                <textarea class="layui-textarea layui-hide" name="casesAnalysis" id="casesAnalysis"></textarea>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">案情评析<span style="color: red">*</span></label>
            <div class="layui-input-block">
                <textarea class="layui-textarea layui-hide" name="casesCommentAnalysis" id="casesCommentAnalysis"></textarea>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">案情结果<span style="color: red">*</span></label>
            <div class="layui-input-block">
                <textarea class="layui-textarea layui-hide" name="casesResult" id="casesResult"></textarea>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">相关法规<span style="color: red">*</span></label>
            <div class="layui-input-block">
                <textarea class="layui-textarea layui-hide" name="casesStatute" id="casesStatute"></textarea>
            </div>
        </div>
        <div style="text-align: center">
            <button class="layui-btn layui-btn-primary" type="button" lay-submit lay-filter="approve">审批案件</button>
        </div >
    </form>
</div>
</body>
<script>
    layui.use(['table','form','layedit','layer','upload'],function () {
        var table = layui.table,
            form = layui.form,
            layedit = layui.layedit,
            layer = layui.layer,
            upload = layui.upload;


        //拖拽上传
        upload.render({
            elem: '#upload'
            ,url: '/uploadCases' //改成您自己的上传接口
            ,done: function(res){
                layer.msg(res.msg);
                layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.data);
                $("#casesImage").val(res.data)
            }
        });

        form.on('submit(upload)',function (data) {
            axios.post('/end/cases/update',data.field).then(res => {
                layer.msg(res.data.msg);
            })
            return false
        })

        form.on('submit(pass)',function (data) {
            if(data.field.casesStatus == '待审核'){
                data.field.casesStatus = "审核通过";
                axios.post('/end/cases/update',data.field).then(res => {
                    if(res.data.code == 200){
                        layer.msg("诉讼案件已审核！审核结果已更新为审核通过")
                    }
                })
            }else {
                layer.msg("案件已审核，或者已经审结，暂无法操作")
            }

            return false
        })

        form.on('submit(notPass)',function (data) {
            if(data.field.casesStatus == '待审核'){
                data.field.casesStatus = "审核未通过";
                axios.post('/end/cases/update',data.field).then(res => {
                    if(res.data.code == 200){
                        layer.msg("诉讼案件已审核！审核结果已更新为审核未通过")
                    }
                })
            }else {
                layer.msg("案件已审核，或者已经审结，暂无法操作")
            }
            return false
        })

        form.on('submit(search)',function (data) {
            table.render({
                elem: '#lawyer'
                , url: '/end/cases/search/' + data.field.casesPlaintiffIdCard
                , limit: 3
                , cols: [[
                    {type:'numbers', fixed: 'left',title:'序号'}
                    , {field: 'casesTitle', title: '案件名称',edit: 'text'}
                    , {field: 'casesIntroduce', title: '案件简述'}
                    , {field: 'casesCreateTime', title: '诉讼时间'}
                    , {field: 'casesEndTime', title: '结案时间'}
                    , {field: 'casesPlaintiffName', title: '原告人',edit: 'text'}
                    , {field: 'casesPlaintiffIdCard', title: '原告身份证',edit: 'text'}
                    , {field: 'casesDefendantName', title: '被告人',edit: 'text'}
                    , {field: 'casesDefendantIdCard', title: '被告身份证',edit: 'text'}
                    , {field: 'casesTypeName', title: '案件类型'}
                    , {field: 'casesSimpleIntroduce', title: '案件简介',edit: 'text'}
                    , {field: 'casesStatus', title: '审核结果',edit: 'text'}
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 280}
                ]]
                , page: true
            });
            return false;
        })

        table.render({
            elem: '#lawyer'
            , url: '/end/cases/get'
            , cols: [[
                {type:'numbers', fixed: 'left',title:'序号'}
                , {field: 'casesTitle', title: '案件名称',edit: 'text'}
                , {field: 'casesIntroduce', title: '案件简述'}
                , {field: 'casesCreateTime', title: '诉讼时间'}
                , {field: 'casesEndTime', title: '结案时间'}
                , {field: 'casesPlaintiffName', title: '原告人',edit: 'text'}
                , {field: 'casesPlaintiffIdCard', title: '原告身份证',edit: 'text'}
                , {field: 'casesDefendantName', title: '被告人',edit: 'text'}
                , {field: 'casesDefendantIdCard', title: '被告身份证',edit: 'text'}
                , {field: 'casesTypeName', title: '案件类型'}
                , {field: 'casesSimpleIntroduce', title: '案件简介',edit: 'text'}
                , {field: 'casesStatus', title: '审核结果'}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 280}
            ]]
            , page: true
        });

        table.on('tool(lawyer)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    axios.post("/end/cases/delete/"+data.id).then(res => {
                        layer.msg(res.data.msg);
                    })
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                axios.post("/end/cases/update",data).then(res => {
                    layer.msg(res.data.msg);
                })
            } else if(obj.event === 'upload'){
                layer.open({
                    type: 1
                    ,content: $("#uploadView")
                    ,btnAlign: 'c' //按钮居中
                    ,shade: 0.3 //不显示遮罩
                });
                $("#id").val(data.id)
            } else if(obj.event === 'show'){
                layer.open({
                    type: 1
                    ,content: $("#cases")
                    ,area: ['800px','550px']
                    ,btnAlign: 'c' //按钮居中
                    ,shade: 0.3 //不显示遮罩
                });
                form.val('cases',{
                    'id': data.id,
                    'casesTitle': data.casesTitle,
                    'casesIntroduce': data.casesIntroduce,
                    'casesPlaintiffName': data.casesPlaintiffName,
                    'casesPlaintiffIdCard': data.casesPlaintiffIdCard,
                    'casesDefendantName': data.casesDefendantName,
                    'casesDefendantIdCard': data.casesDefendantIdCard,
                    'casesStatus': data.casesStatus
                })
                $("#annex1").attr("src",data.annex1);
                $("#annex2").attr("src",data.annex2);
                $("#annex3").attr("src",data.annex3);
            } else if(obj.event === 'result'){
                layer.open({
                    type: 1
                    ,content: $("#uploadView")
                    ,btnAlign: 'c' //按钮居中
                    ,shade: 0.3 //不显示遮罩
                });
                $("#id").val(data.id)
            } else if(obj.event === 'approve'){
                axios.get('/end/cases/approve/' + data.id).then(res => {
                    if(res.data.code == 201){
                        layer.open({
                            type: 2
                            ,content: '/html/cases/approve.html?id=' + data.id
                            ,area:['1000px','700px']
                            ,shade: 0.3 //不显示遮罩
                        });
                    }else {
                        layer.msg(res.data.msg);
                    }
                })

            }
        });


        form.verify({
            title: function(value){
                if(value.length < 1){
                    return '输入项至少得1个字符啊';
                }
            }
            ,image: function (value) {
                if(value.length < 1){
                    return '图片不可以无哇';
                }
            }
            ,pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
        });

    })
</script>
</html>
